<template>
  <el-scrollbar max-height="90vh">
    <draggable v-model="componentList" item-key="id" :group="{ name: 'component', pull: 'clone', put: false }"
      :clone="handleClone">
      <template #item="{ element }">
        <div class="item">
          {{ element.text }}
        </div>
      </template>
    </draggable>
  </el-scrollbar>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'
import { basicFields } from '../config'
import { generateId, cloneWidget } from '../util'

const props =withDefaults(defineProps<{
  hideField?:string
}>(),{
})

// 组件数据列表
const componentList = basicFields.map((item) => {
  if(props.hideField && props.hideField.includes(item.type)){
    return null
  }
  return {
    ...item,
    id: generateId(),
  }
}).filter(Boolean)

const handleClone = (data) => {
  return cloneWidget(data)
}
</script>

<style scoped>
.item {
  border: #0083ee 1px dashed;
  margin: 10px;
  padding: 10px;
  user-select: none;
}
</style>
